<template>
  <span>
    <el-row>
      <el-col :span="24">
        <el-form-item class="supple-base-input"
                      label="电子回单"
                      label-width="90px"
                      prop="no">
          <select-device :form-info="form"
                         :num="num"
                         @input="handleCode" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-form-item label="途径地区"
                      label-width="90px"
                      prop="wayDistrict">
          <area-cascader v-model="areaValues"
                         :props="props"
                         @input="handleConfirm" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-form-item label="详细地址"
                      label-width="90px"
                      prop="wayAddress">
          <!-- <object-input placeholder="如道路、园区、楼栋号、单元等， 无需输入省市区"
                        :maxlength='100'
                        @input="handleInput" /> -->
          <el-input type="textarea"
                    :value="
              num === 1
                ? form.secordReceiptAddress.wayAddress
                : form.receiptAddress.wayAddress
            "
                    maxlength="100"
                    placeholder="如道路、园区、楼栋号、单元等， 无需输入省市区"
                    @input="handleInput"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </span>
</template>

<script>
import AreaCascader from "@basic/area/AreaCascader.vue";
import SelectDevice from "./SelectDevice.vue";
export default {
  name: "ElectronicReplyForm",
  components: { SelectDevice, AreaCascader },
  props: {
    num: Number,
    formInfo: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      form: {},
      options: [],
      props: {
        label: 'name',
        value: 'areaCode',
        checkStrictly: true
      },
      areaValues: {}
    };
  },
  created () {
    this.form = this.formInfo;
    const address = this.num === 1 ? this.form.secordReceiptAddress : this.form.receiptAddress;
    this.areaValues.provinceCode = address?.wayProvinceCode;
    this.areaValues.cityCode = address?.wayCityCode;
    this.areaValues.districtCode = address?.wayDistrictCode;
  },
  methods: {
    handleCode (code) {
      // this.form.thirdDeviceCode = code
      console.log("code", code);
    },
    handleConfirm (val) {
      let address = [];
      if (this.form.checkValue == 3) {
        if (this.num === 1) address[0] = { stationName: val.city };
        else {
          address = [...this.form.currentAddress];
          address[1] = { stationName: val.city };
        }
        this.form.currentAddress = [...address];
      }

      if (this.num === 1) {
        this.form.secordReceiptAddress = {
          ...this.form.secordReceiptAddress,
          wayCity: val.city,
          wayCityCode: val.cityCode,
          wayDistrict: val.district,
          wayDistrictCode: val.districtCode,
          wayProvince: val.province,
          wayProvinceCode: val.provinceCode
        };
      } else {
        this.form.receiptAddress = {
          ...this.form.receiptAddress,
          wayCity: val.city,
          wayCityCode: val.cityCode,
          wayDistrict: val.district,
          wayDistrictCode: val.districtCode,
          wayProvince: val.province,
          wayProvinceCode: val.provinceCode
        };
      }
    },
    handleInput (val) {
      if (this.num === 1)
        this.form.secordReceiptAddress = {
          ...this.form.secordReceiptAddress,
          wayAddress: val
        };
      else
        this.form.receiptAddress = {
          ...this.form.receiptAddress,
          wayAddress: val
        };
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-row {
  margin: 10px;
}
</style>
